<template>
<div class="app">

  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">推荐</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-s-data"></i>
      <span slot="title">排行</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-s-ticket"></i>
      <span slot="title">免费</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-s-management"></i>
      <span slot="title">完本</span>
    </el-menu-item>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-male"></i>
        <span>男频</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="玄幻">玄幻</el-menu-item>
        <el-menu-item index="武侠">武侠</el-menu-item>
        <el-menu-item index="都市">都市</el-menu-item>
        <el-menu-item index="游戏">游戏</el-menu-item>
        <el-menu-item index="科幻">科幻</el-menu-item>
        <el-menu-item index="悬疑">悬疑</el-menu-item>
      </el-menu-item-group>

    </el-submenu>

    <el-submenu index="6">
    <template slot="title">
      <i class="el-icon-female"></i>
      <span>女频</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="古代言情">古代言情</el-menu-item>
      <el-menu-item index="现代言情">现代言情</el-menu-item>
      <el-menu-item index="玄幻言情">玄幻言情</el-menu-item>
      <el-menu-item index="浪漫青春">浪漫青春</el-menu-item>
      <el-menu-item index="现实生活">现实生活</el-menu-item>
      <el-menu-item index="悬疑推理">悬疑推理</el-menu-item>
    </el-menu-item-group>

  </el-submenu>
    <el-menu-item index="7">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>

  </el-menu>

</div>
</template>

<script>
export default {
  name: "AsideComponent",
  props: {},
  data() {
    return {}
  }, methods: {}, watch: {}, computed: {}
}
</script>

<style scoped>
.app{
  text-align: center;
}
</style>